<div class="umb-editor umb-prevalues-multivalues" ng-controller="Umbraco.PrevalueEditors.MultiColorPickerController">
    <div class="control-group  umb-prevalues-multivalues__add color-picker-preval">
        <div class="umb-prevalues-multivalues__left">
            <input name="newColor" type="hidden" />
            <label for="newColor" val-highlight="{{hasError}}">#{{newColor}}</label>
            <input name="newLabel" type="text" ng-model="newLabel" focus-when="{{focusOnNew}}" class="umb-editor color-label" placeholder="Label" ng-show="labelEnabled" />
        </div>
        <div class="umb-prevalues-multivalues__right">
            <button class="btn btn-info add" ng-click="add($event)"><localize key="general_add">Add</localize></button>
        </div>
    </div>
    <div ui-sortable="sortableOptions" ng-model="model.value">
        <div class="control-group umb-prevalues-multivalues__listitem color-picker-preval" ng-repeat="item in model.value track by $id(item)">
            <i class="icon icon-navigation handle"></i>
            <div class="umb-prevalues-multivalues__left">
                <div class="thumbnail span1" hex-bg-color="{{item.value}}" hex-bg-orig="transparent"></div>
                <div class="color-picker-prediv">
                    <pre>#{{item.value}}</pre>
                    <span ng-bind="item.label" ng-if="!labelEnabled"></span>
                    <input type="text" ng-if="labelEnabled" ng-model="item.label" val-server="item_{{$index}}" required />
                </div>
            </div>
            <div class="umb-prevalues-multivalues__right">
                <a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></a>
            </div>
        </div>
    </div>
</div>
